// import React from 'react'
import React from 'react';
import ReactDOM from 'react-dom';

// 导入样式
import './index.css'; // 告诉webpack

const name = 'Jack'; // 数据
const age = 18; // number
const likes = ['吃饭', '睡觉', '敲代码'];
const obj = { name: 'Rose', age: 18 };
const fn = (prams) => {
  return <h3>{prams}</h3>;
};

// 重点
const h2 = <h2>我是h2</h2>;
const likes2 = [<h2>吃饭</h2>, <h2>睡觉</h2>, <h2>敲代码</h2>];

// 条件渲染
const isLoading = true;

// 生成标签，document.createElement ==> <div></div>
// ture <h1>加载中</h1> false <h1>加载完毕</h1>
const loading = <h1>加载中</h1>;
const loaded = <h1>加载完毕</h1>;

// 条件渲染
const loadData = () => {
  if (isLoading) {
    return loading;
  } else {
    return loaded;
  }
};

// 列表渲染
const books = ['Angular', 'Vue', 'React', 'xxx']; // 数据，列表

const list = [{ name: 'Angular' }, { name: 'Vue' }, { name: 'React' }]; // 数据，列表

const books2 = ['Vue', 'Angular', 'React', 'xxx'];
const books5 = [<li>Angular</li>, <li>Vue</li>, <li>React</li>];

const books3 = books.map((item, index) => {
  return <li key={index}>{item}</li>;
});

const books4 = books.map((item, index) => {
  return <li key={index}>{item}</li>;
});

// {books.map((item, index) => (
//   <li key={index}>{item}</li>
// ))}

console.log('books', books3);

const theme = 'red';
const fn3 = () => {
  if (theme === 'red') {
    return 'h-title';
  } else {
    return 'h-title-selected';
  }
};

const hTag = <h1 className={fn3()}>H1文本</h1>;

const list2 = [{ name: 'Angular' }, { name: 'Vue' }, { name: 'React' }]; // 数据，列表
const tag = (
  <div>
    {list2.map((item) => (
      <li>{item.name}</li>
    ))}

    {hTag}

    {books4}
    {books3}

    {books}

    {books.map((item, index) => (
      <li key={index}>{item}</li>
    ))}

    {loadData()}

    {isLoading ? loading : loaded}

    {isLoading && loading}

    <h1>
      Hello{name},我今年{age}
    </h1>
    <hr />
    <div>{likes.join('==>')}</div>
    <hr />
    <div>
      {}
      {obj.name} {obj.age}
    </div>
    <div>{age > 18 ? '谈恋爱' : '好好学习'}</div>
    <div>{fn('xxx')}</div>
    <div>{fn('yyy')}</div>
    <div>{h2}</div>

    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></img>
  </div>
);

ReactDOM.render(tag, document.getElementById('root'));
